<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<html:xhtml />
<script type="text/javascript">
    var snpTable;
    var subjectTable;
    var phenoTable;
    var subjectConditions = new Array();
    var phenoConditions = new Array();

    var phenotypes = new Array();
    <logic:iterate id="phenotype" name="geneGeneInteractionForm" property="phenotypes" indexId="index">
        phenotypes[<bean:write name="index" />] = new Array();
        phenotypes[<bean:write name="index" />][0] = "<bean:write name="phenotype" property="name" />";
        phenotypes[<bean:write name="index" />][1] = "<bean:write name="phenotype" property="type" />";
        // TODO: Add minimum, maximum values, and unit here.
        phenotypes[<bean:write name="index" />][2] = 0;
        phenotypes[<bean:write name="index" />][3] = 7;
    </logic:iterate>

    function toggleRadio(checkbox)
    {
        if ($(checkbox).is(":checked"))
        {
            $(checkbox).parent().next().children(":radio").removeAttr("disabled");
        }
        else
        {
            $(checkbox).parent().next().children(":radio").attr("disabled", "disabled");
        }
    }

    function createHidden()
    {
        // Generate a hidden input for snps
        rows = snpTable.fnGetNodes();
        for (i = 0; i < rows.length; i++)
        {
            if ($(rows[i]).hasClass("selected"))
            {
                $("form#geneGeneInteractionForm").append('<input type="hidden" name="selectedSnps" value="'
                    + $(rows[i]).find(":checkbox:checked").val() + '" \/>');
            }
            if ($(rows[i]).hasClass("marker"))
            {
                $("form#geneGeneInteractionForm").append('<input type="hidden" name="conditioningSnps" value="'
                    + $(rows[i]).find(":radio:checked").val() + '" \/>');
            }
        }
        
        // Generate a hidden input for conditions
        for (x = 0; x < subjectConditions.length; x++)
        {
            $("form#geneGeneInteractionForm").append('<input type="hidden" name="subjectConditions" value="'
                                                    + generateHiddenValue(subjectConditions, subjectTable, x) + '" \/>');
        }
        for (x = 0; x < subjectConditions.length; x++)
        {
            $("form#geneGeneInteractionForm").append('<input type="hidden" name="phenoConditions" value="'
                                                    + generateHiddenValue(phenoConditions, phenoTable, x) + '" \/>');
        }

        return true;
    }
    
    function generateHiddenValue(conditions, table, index) {
        hidden = "";
        if (index > 0)
        {
            tr = table.fnGetNodes(index);
            hidden += $(tr).find("select").val();
        }
        for (i = 0; i < conditions[index].length; i++)
        {
            hidden += "|" + conditions[index][i];
        }
        hidden += "\n";
        
        return hidden;
    }

    function initSnps()
    {
        // Clean up all checked/selected checkbox/radio buttons
        // GOTCHA: This need to be before the dataTable call
        // so that all checkbox/radio buttons are affected
        $("#snps :checkbox:checked").removeAttr("checked");
        $("#snps :radio:checked").removeAttr("checked");

        // Disable all radio buttons
        $("#snps :radio").attr("disabled", "disabled");

        // 'DataTablize' the table
        snpTable = $("#snps #snpSelectTable").dataTable({
            "bPaginate": true,
            "sPaginationType": "full_numbers",
            "bFilter": true,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aoColumns": [{"sType": "html"},
                {"sType": "html"},
                {"bSortable": false, "bSearchable": false},
                {"bSortable": false, "bSearchable": false}],
            "aaSorting": [[1,"asc"]]
        });

        // Set up select checkbox and conditioning marker radio
        $("#snps #snpSelectTable :checkbox").live("click", function(){
            if ($(this).is(":checked"))
            {
                // Add a dummy class
                $(this).parent().parent().addClass("selected");
            }
            else
            {
                // Remove the dummy class added above
                $(this).parent().parent().removeClass("selected");

                // If this is not selected, it cannot be condition marker as well.
                $(this).parent().parent().removeClass("marker");
            }
        });
        $("#snps #snpSelectTable :radio").live("change", function(){
            markerRow = $(this).parent().parent()[0];
            rows = snpTable.fnGetNodes();

            // Iterate thru all rows in the table
            for (i = 0; i < rows.length; i++)
            {
                if (rows[i] == markerRow)
                {
                    // Add a dummy class
                    $(rows[i]).addClass("marker");
                }
                else
                {
                    // Uncheck all other radio buttons
                    $(rows[i]).find(":radio").removeAttr("checked");
                    // Remove the dummy class added above
                    $(rows[i]).removeClass("marker");
                }
            }
        });
    }

    function initConditionList(div, table, conditionArray, addEditWindow, groupWindow)
    {
        // 'DataTablize' the table
        conditionTable = $(table).dataTable({
            "bPaginate": true,
            "sPaginationType": "full_numbers",
            "bFilter": true,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aoColumns": [{"bSortable": false, "bSearchable": false},
                {"bSortable": false, "bSearchable": false},
                null,
                {"bSortable": false, "bSearchable": false}],
            "aaSorting": [[2,"asc"]]
        });
        if ($(table).attr("id") == "subjectTable")
        {
            subjectTable = conditionTable;
        }
        else if ($(table).attr("id") == "phenoTable")
        {
            phenoTable = conditionTable;
        }

        $(div).find("p.buttons").buttonset();
        $(div).find("p.buttons :button").button();

        // Set up add/edit window
        $(addEditWindow).dialog({
            autoOpen: false,
            modal: true,
            width: 600,
            position: "top",
            buttons: {
                Ok: function() {
                    // If there is no condition, do not bother do anything
                    if ($(this).find("tbody").children().length > 0)
                    {
                        conditionTable = undefined;
                        conditions = undefined;
                        mainTable = undefined;
                        if ($(this).hasClass("subjects"))
                        {
                            conditionTable = subjectTable;
                            conditions = subjectConditions;
                            mainTable = $("div#subjects table#subjectTable");
                        }
                        else if ($(this).hasClass("pheno"))
                        {
                            conditionTable = phenoTable;
                            conditions = phenoConditions;
                            mainTable = $("div#phenotypes table#phenoTable");
                        }

                        addEditConditons(mainTable, conditions, conditionTable, this);
                    }

                    $(this).dialog("close");
                    $(this).children("table").empty();
                },
                Cancel: function() {
                    $(this).dialog("close");
                    $(this).children("table").empty();
                }
            }
        });

        // Set up buttons to open up add/edit window
        $(div).find(":button.add").click(function() {
            $(addEditWindow).dialog("option", "title", "Add Conditions");
            $(addEditWindow).dialog("open");
        });
        $(div).find(":button.edit").click(function() {
            // GOTCHA: If the dialog is opened after the radio buttons are set,
            // IE7 will uncheck the radio buttons for us. Of course, users have
            // no idea about this, because jQuery buttons are still checked.
            // Thus, opening this dialog before everything is set.
            $(addEditWindow).dialog("option", "title", "Edit Conditions");
            $(addEditWindow).dialog("open");
            
            tr = $(table).find(":checkbox:checked:first").parent().parent()[0];
            loadConditions(addEditWindow, conditionArray[conditionTable.fnGetPosition(tr)]);
        });

        // Set up group/ungroup window
        $(groupWindow).dialog({
            autoOpen: false,
            modal: true,
            width: 600,
            position: "top",
            buttons: {
                Ok: function() {
                    conditionTable = undefined;
                    conditions = undefined;
                    mainTable = undefined;
                    if ($(this).hasClass("subjects"))
                    {
                        conditionTable = subjectTable;
                        conditions = subjectConditions;
                        mainTable = $("div#subjects table#subjectTable");
                    }
                    else if ($(this).hasClass("pheno"))
                    {
                        conditionTable = phenoTable;
                        conditions = phenoConditions;
                        mainTable = $("div#phenotypes table#phenoTable");
                    }

                    groupConditions(mainTable, conditions, conditionTable, this);

                    $(this).dialog("close");
                    $(this).children("div").empty();
                },
                Cancel: function() {
                    $(this).dialog("close");
                    $(this).children("div").empty();
                }
            }
        });

        // Set up buttons to open up group/ungroup window
        $(div).find(":button.group").click(function() {
            // Load selected groups/rows into the window
            array = new Array();
            rows = new Array();
            $(table).find(":checkbox:checked").each(function(index) {
                rowIndex = conditionTable.fnGetPosition($(this).parent().parent()[0]);
                array[index] = conditionArray[rowIndex];
                rows[index] = rowIndex;
            });
            loadConditionsGroup(array, rows, groupWindow);

            // Change the list of groups/rows into drag&drop menus
            $(groupWindow).find("div ul").sortable({
                connectWith: 'ul',
                items: "li:not(.ui-widget-header)",
                stop: function() {
                    $(groupWindow).find("li:nth-child(2) select").css("visibility", "hidden");
                    $(groupWindow).find("li:not(:nth-child(2)) select").css("visibility", "visible");
                }
            }).disableSelection();

            $(groupWindow).dialog("open");
        });
    }

    function addEditConditons(table, conditionArray, conditionTable, addEditWindow) {
        // Pass conditions over to the main table
        condition = "";
        // Generate condition string to display in the main table
        // As well as the array to store the condition values to load
        array = new Array();
        $(addEditWindow).find("table tr").each(function(index) {
            array[index] = new Array();
            if ($(this).find("select[id^=select]").css("visibility")
                && $(this).find("select[id^=select]").css("visibility") != "hidden")
            {
                condition += $(this).find("select[id^=select]").val();
                array[index][0] = $(this).find("select[id^=select]").val();
            }
            else
            {
                array[index][0] = "";
            }
            condition += " (" + $(this).find("select[id^=name]").val();
            array[index][1] = $(this).find("select[id^=name]").val();
            if ($(this).find("select[id^=name] option:selected").hasClass("binary"))
            {
                array[index][2] = $(this).find(":radio[name^=binary]:checked").val();
                condition += " is " + array[index][2] + ") ";
            }
            else if ($(this).find("select[id^=name] option:selected").hasClass("continuous"))
            {
                array[index][2] = $(this).find("div[id^=slider]").slider("values", 0);
                array[index][3] = $(this).find("div[id^=slider]").slider("values", 1);
                condition += " is between " + array[index][2] + " - " + array[index][3] + " years) ";
            }
        });

        if ($(addEditWindow).dialog("option", "title") == "Edit Conditions")
        {
            // GOTCHA: It is impossible to replace a row with 'DataTables'.
            // Thus, delete the old row/element from the table/array and add new row/element
            currentIndex = conditionTable.fnGetPosition($(table).find(":checkbox:checked:first")
                                                      .parent().parent()[0]);
            conditionArray.splice(currentIndex, 1);
            conditionTable.fnDeleteRow(currentIndex, null, true);
        }

        // Add this condition to conditionArray and to the main table
        // Find the index of the new row within the main table
        // and use it as the index for this in conditionArray
        newIndex = conditionTable.fnAddData(["<input type='checkbox' \/>",
                                           "<select><option>And<\/option><option>Or<\/option><\/select>",
                                           condition,
                                           "<button type='button'>Delete<\/button>"])[0];
        conditionArray[newIndex] = array;

        // Set up delete button
        tr = conditionTable.fnGetNodes(newIndex);
        $(tr).find(":button").button({
            icons: {primary: 'ui-icon-trash'},
            text: false
        }).click(function() {
            index = conditionTable.fnGetPosition($(this).parent().parent()[0]);
            conditionTable.fnDeleteRow(index);
            conditionArray.splice(index, 1);
        });
    }

    function groupConditions(table, conditionArray, conditionTable, groupWindow) {
        array = new Array();
        conditions = new Array();
        $(groupWindow).find("div ul").each(function(index) {
            // Do following iff this group has any condition under it
            // GOTCHA: Checking for more than 1 child because the heading is considered as a child
            if ($(this).children().length > 1)
            {
                array[index] = new Array();
                conditions[index] = "";
                // GOTCHA: Doing the following for all child but the first one
                // because the heading is considered as the first child
                $(this).children("li:not(:first-child)").each(function(i) {
                    // Copy over the elements for this condition from conditionArray
                    firstIndex = $(this).find("input:hidden.first").val();
                    secondIndex = $(this).find("input:hidden.second").val();
                    array[index][i] = conditionArray[firstIndex][secondIndex];
                    // Copy over the condition to display it in the main table
                    if ($(this).find("select").css("visibility")
                        && $(this).find("select").css("visibility") != "hidden")
                    {
                        conditions[index] += $(this).find("select").val();
                    }
                    conditions[index] += " (" + $(this).find("span").text() + ") ";
                });
            }
        });

        // GOTCHA: It is impossible to replace a row with 'DataTables'.
        // Thus, delete the old rows/elements from the table/array and add new rows/elements
        $(table).find(":checkbox:checked").each(function(){
            currentIndex = conditionTable.fnGetPosition($(this).parent().parent()[0]);
            conditionArray.splice(currentIndex, 1);
            conditionTable.fnDeleteRow(currentIndex, null, true);
        });

        // Add the new groups to conditionArray and the main table
        for (i = 0; i < array.length; i++)
        {
            if (array[i] && conditions[i])
            {
                // Get the index of the new row within the main table
                // and use it as the index for this in conditionArray
                newIndex = conditionTable.fnAddData(["<input type='checkbox' \/>",
                                                   "<select><option>And<\/option><option>Or<\/option><\/select>",
                                                   conditions[i],
                                                   "<button type='button'>Delete<\/button>"])[0];
                conditionArray[newIndex] = array[i];
                
                // Set up delete button
                tr = conditionTable.fnGetNodes(newIndex);
                $(tr).find(":button").button({
                    icons: {primary: 'ui-icon-trash'},
                    text: false
                }).click(function() {
                    index = conditionTable.fnGetPosition($(this).parent().parent()[0]);
                    conditionTable.fnDeleteRow(index);
                    conditionArray.splice(index, 1);
                });
            }
        }
    }

    function loadConditionsGroup(array, rows, groupWindow) {
        // Generate a list of ul's according to the array.
        // Each ul represent a group; each li represent a condition
        ul = "";
        for (i = 0; i < array.length; i++)
        {
            ul += "<ul class='ui-widget-content ui-corner-all'>";
            ul += "<li class='ui-widget-header ui-corner-all'><h3>Group<\/h3><\/li>";
            for (j = 0; j < array[i].length; j++)
            {
                ul += "<li><select><option";
                if (array[i][j][0] == "And")
                {
                    ul += " selected='selected'";
                }
                ul += ">And<\/option><option";
                if (array[i][j][0] == "Or")
                {
                    ul += " selected='selected'";
                }
                ul += ">Or<\/option><\/select>&nbsp;<span>";
                // Utilize the fact that binary phenotypes only have 3 elements (and/or, name, true/false)
                // whereas continuous phenotypes have 4 elements (and/or, name, min, max) in their array entry
                if (array[i][j].length == 3)
                {
                    ul += array[i][j][1] + " is " + array[i][j][2];
                }
                else if (array[i][j].length == 4)
                {
                    ul += array[i][j][1] + " is between " + array[i][j][2] + " - " + array[i][j][3] + " years";
                }
                ul += "<\/span><input type='hidden' class='first' value='" + rows[i] + "'\/>";
                ul += "<input type='hidden' class='second' value='" + j + "'\/><\/li>";
            }
            ul += "<\/ul>";
        }

        $(groupWindow).find("div").append(ul);

        // Hide first And/Or selector
        $(groupWindow).find("li:nth-child(2) select").css("visibility", "hidden");
    }

    function loadConditions(addEditWindow, array) {
        for (i = 0; i < array.length; i++)
        {
            // Iterate through the given array, add a condition,
            // and edit it to match the array's values
            tr = addCondition(addEditWindow, i);
            $(tr).find("[id^=select]").val(array[i][0]);
            $(tr).find("[id^=name]").val(array[i][1]);
            toggleBinaryCont($(tr).find("[id^=name]"), $(tr).find("td:eq(2)"), (array[i][2] == 'true'), array[i][2], array[i][3]);
        }

        // Hide first And/Or selector
        $(addEditWindow).find("table tr:first select[id^=select]").css("visibility", "hidden");
    }

    function addCondition(addEditWindow, count) {
        tr = "<tr>";

        // Add And/Or selector
        tr += "<td style='width: 55px;'><select id='select" + count + "'>"
              + "<option>And<\/option><option>Or<\/option>"
              + "<\/select><\/td>";

        // Add criteria selector
        tr += "<td><select id='name" + count + "'>";
        for (x = 0; x < phenotypes.length; x++)
        {
            tr += "<option class='";
            if (phenotypes[x][1] == "1")
            {
                tr += "binary";
            }
            else if (phenotypes[x][1] == "2")
            {
                tr += "continuous";
            }
            tr += "'>" + phenotypes[x][0] + "<\/option>";
        }
        tr += "<\/select><\/td>";

        // Add slider
        tr += "<td style='width: 65%;'><div id='continuous" + count + "'>"
              + "<input type='text' id='value0' /> - <input type='text' id='value1' />"
              + "<\/span> years"
              + "<div id='slider" + count + "' \/><\/div>"
              + "<div id='binary" + count + "'>"
              + "<input id='bRadio" + count + "1' type='radio' name='binary" + count + "' value='true' \/>"
              + "<label for='bRadio" + count + "1'>True<\/label>"
              + "<input id='bRadio" + count + "2' type='radio' name='binary" + count + "' value='false' \/>"
              + "<label for='bRadio" + count + "2'>False<\/label>"
              + "<\/div><\/td>";

        // Add delete button
        tr += "<td style='width: 40px;'><button type='button' id='delete" + count + "'>Delete<\/button><\/td>";

        tr += "<\/tr>";
        $(addEditWindow).children("table").append(tr);

        // Set up slider
        $(addEditWindow).find("div#slider" + count).slider({
            range: true,
            slide: function(event, ui) {
                $(addEditWindow).find("div#continuous" + count + " #value0").val(ui.values[0]);
                $(addEditWindow).find("div#continuous" + count + " #value1").val(ui.values[1]);
            }
        });

        // Link up text boxes with the slide
        $(addEditWindow).find("div#continuous" + count).children("#value0").change(function() {
            $(addEditWindow).find("div#slider" + count).slider("values", 0, $(this).val());
            $(this).val($(addEditWindow).find("div#slider" + count).slider("values", 0));
        });
        $(addEditWindow).find("div#continuous" + count).children("#value1").change(function() {
            $(addEditWindow).find("div#slider" + count).slider("values", 1, $(this).val());
            $(this).val($(addEditWindow).find("div#slider" + count).slider("values", 1));
        });

        // Set up radio buttons
        $(addEditWindow).find("div#binary" + count).buttonset();

        // Set up delete button
        $(addEditWindow).find("table :button").button({
            icons: {primary: 'ui-icon-trash'},
            text: false
        }).click(function() {
            $(this).parent().parent().remove();

            // Hide first And/Or selector
            $(addEditWindow).find("table tr:first select[id^=select]").css("visibility", "hidden");
        });

        // Set up phenotype names selector to toggle between binary and continuous selectors
        $(addEditWindow).find("select#name" + count).change(function() {
            index = $(this).find("option:selected").index();
            toggleBinaryCont(this, $(this).parent().next(), true, phenotypes[index][2], phenotypes[index][3]);
        });
        index = $(addEditWindow).find("select#name" + count + " option:selected").index();
        toggleBinaryCont($(addEditWindow).find("select#name" + count), $(addEditWindow).find("div#binary" + count).parent(),
                         true, phenotypes[index][2], phenotypes[index][3]);

        return $(addEditWindow).find("tr:last");
    }
    
    function toggleBinaryCont(select, td, binaryValue, value0, value1) {
        if ($(select).find("option:selected").hasClass("binary"))
        {
            // Load up the selected radio
            if (binaryValue)
            {
                test = $(td).find(":radio[name^=binary][value=true]");
                $(td).find(":radio[name^=binary][value=true]").attr("checked", "checked");
                $(td).find(":radio[name^=binary][value=false]").removeAttr("checked");
            }
            else
            {
                $(td).find(":radio[name^=binary][value=true]").removeAttr("checked");
                $(td).find(":radio[name^=binary][value=false]").attr("checked", "checked");
            }
            $(td).find(":radio[name^=binary][value=true]").button("refresh");
            $(td).find(":radio[name^=binary][value=false]").button("refresh");
            
            $(td).find("div[id^=continuous]").hide();
            $(td).find("div[id^=binary]").show();
        }
        else if ($(select).find("option:selected").hasClass("continuous"))
        {
            // Load up the slider values
            index = $(select).find("option:selected").index();
            $(td).find("div[id^=slider]").slider("option", "min", phenotypes[index][2]);
            $(td).find("div[id^=slider]").slider("option", "max", phenotypes[index][3]);
            $(td).find("div[id^=slider]").slider("values", 0, value0);
            $(td).find(":text#value0").val(value0);
            $(td).find("div[id^=slider]").slider("values", 1, value1);
            $(td).find(":text#value1").val(value1);
            
            $(td).find("div[id^=continuous]").show();
            $(td).find("div[id^=binary]").hide();
        }
    }

    function initPopupButtons() {
        // Set up add condition button
        count = 0;
        $("div.addEditCondition").each(function() {
            $(this).find(":button.add").button({
                icons: {primary: 'ui-icon-plusthick'}
            }).click(function() {
                div = $(this).parent();
                addCondition(div, count);
                count++;

                // Hide first And/Or selector
                $(div).find("table tr:first select[id^=select]").css("visibility", "hidden");
            });
        });

        // Set up add group button
        $("div.groupCondition").each(function() {
            $(this).find(":button.add").button({
                icons: {primary: 'ui-icon-plusthick'}
            }).click(function() {
                div = $(this).parent();
                $(div).children("div").append("<ul class='ui-widget-content ui-corner-all'>"
                    + "<li class='ui-widget-header ui-corner-all'>"
                    + "<h3>Group<\/h3><\/li><\/ul>");

                // Make the new ul sortable as well
                $(div).find("div ul:last").sortable({
                    connectWith: 'ul',
                    items: "li:not(.ui-widget-header)",
                    stop: function() {
                        $(div).find("li:nth-child(2) select").css("visibility", "hidden");
                        $(div).find("li:not(:nth-child(2)) select").css("visibility", "visible");
                    }
                }).disableSelection();
            });
        });
    }

    $(document).ready(function() {
        $("#helpDialog").dialog({
            autoOpen: false,
            position: "right"
        });
        $("#helpButton").click(function() {
            $("#helpDialog").dialog("open");
        });

        tabs = $("#geneGeneTab").tabs();
        $("#snpsNext").click(function() {
            tabs.tabs('select', 1);
            return false;
        });
        $("#subjectsPrev").click(function() {
            tabs.tabs('select', 0);
            return false;
        });
        $("#subjectsNext").click(function() {
            tabs.tabs('select', 2);
            return false;
        });
        $("#phenoPrev").click(function() {
            tabs.tabs('select', 1);
            return false;
        });

        initSnps();
        initConditionList($("div#subjects"), $("div#subjects table#subjectTable"), subjectConditions,
                          $("div#addEditSubjectsCondition"), $("div#groupSubjectsCondition"));
        initConditionList($("div#phenotypes"), $("div#phenotypes table#phenoTable"), phenoConditions,
                          $("div#addEditPhenoCondition"), $("div#groupPhenoCondition"));
        initPopupButtons();

        // Bind onsubmit event to submit button
        $("form").submit(function() {
            return createHidden();
        });
    });
</script>
<div id="geneGeneParameters" class="content">
    <h2>
        Gene Gene Interaction Parameters <span id="helpButton" class="ui-icon help ui-icon-info">&nbsp;&nbsp;&nbsp;</span>
    </h2>
    <div id="geneGeneTab" class="tab">
        <ul>
            <li><a href="#snps">SNPs</a></li>
            <li><a href="#subjects">Subjects</a></li>
            <li><a href="#phenotypes">Phenotypes</a></li>
        </ul>
        <html:form action="geneGeneSubmit">
            <div id="snps" class="list">
                <html:errors property="snpSelection" />
                <html:errors property="snpSelectionGene" />
                <html:errors property="conditioningSnps" />
                <table id="snpSelectTable" cellpadding="0" cellspacing="0" border="0" class="display">
                    <thead>
                        <tr>
                            <th>RS number</th>
                            <th>Gene</th>
                            <th>Select</th>
                            <th>Conditioning Marker</th>
                        </tr>
                    </thead>
                    <tbody>
                        <logic:iterate id="snp" name="geneGeneInteractionForm" property="snps">
                            <tr>
                                <td>
                                    <a href="<html:rewrite page='/snpSummary.do' />?rsNumber=<bean:write name='snp' property='rsNumber'/>">
                                        <bean:write name='snp' property='rsNumber'/>
                                    </a>
                                </td>
                                <td>
                                    <a href="geneSummary.do?geneName=<bean:write name='snp' property='gene.name'/>">
                                        <bean:write name="snp" property="gene.name"/>
                                    </a>
                                </td>
                                <td class="inputbox">
                                    <input type="checkbox" value="<bean:write name='snp' property='rsNumber'/>" onclick="toggleRadio(this);" />
                                </td>
                                <td class="inputbox">
                                    <input type="radio" name="conditionMarker" value="<bean:write name='snp' property='rsNumber'/>" />
                                </td>
                            </tr>
                        </logic:iterate>
                    </tbody>
                </table>
                <p><html:button styleId="snpsNext" property="submitType" value="Next" /></p>
            </div>
            <div id="subjects" class="list conditionList">
                <p class="buttons">
                    <button type="button" class="add">Add</button>
                    <button type="button" class="edit">Edit</button>
                    <button type="button" class="group">Group/Ungroup</button>
                </p>
                <table id="subjectTable" cellpadding="0" cellspacing="0" border="0" class="display">
                    <thead>
                        <tr>
                            <th></th>
                            <th></th>
                            <th>Condition</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <p>
                    <html:button styleId="subjectsPrev" property="submitType" value="Previous" />
                    <html:button styleId="subjectsNext" property="submitType" value="Next" />
                </p>
            </div>
            <div id="phenotypes" class="list conditionList">
                <p class="buttons">
                    <button type="button" class="add">Add</button>
                    <button type="button" class="edit">Edit</button>
                    <button type="button" class="group">Group/Ungroup</button>
                </p>
                <table id="phenoTable" cellpadding="0" cellspacing="0" border="0" class="display">
                    <thead>
                        <tr>
                            <th></th>
                            <th></th>
                            <th>Condition</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <!-- TODO: Delete below once the job class has been modified -->
                <dl>
                    <dt>Phenotype</dt>
                    <dd>
                        <html:select name="geneGeneInteractionForm" property="selectedPhenotype">
                            <html:optionsCollection property="phenotypes" label="name" value="name" />
                        </html:select>
                    </dd>
                </dl>
                <p>
                    <html:button styleId="phenoPrev" property="submitType" value="Previous" />
                    <html:submit styleId="phenoNext" property="submitType" value="Analyze" />
                </p>
            </div>
        </html:form>
    </div>
</div>
<div id="helpDialog" title="Gene Gene Interaction Parameters">
    <tiles:insert name="geneGeneParamHelp" />
</div>
<div id="addEditSubjectsCondition" class="geneGenePopup addEditCondition subjects">
    <button type="button" class="add">New Condition</button>
    Specify conditions
    <table cellpadding="0" cellspacing="10" border="0" style="width: 100%;">
    </table>
</div>
<div id="addEditPhenoCondition" class="geneGenePopup addEditCondition pheno">
    <button type="button" class="add">New Condition</button>
    Specify conditions
    <table cellpadding="0" cellspacing="10" border="0" style="width: 100%;">
    </table>
</div>
<div id="groupSubjectsCondition" title="Group Conditions" class="geneGenePopup groupCondition subjects">
    <button type="button" class="add">New Group</button>
    <div></div>
</div>
<div id="groupPhenoCondition" title="Group Conditions" class="geneGenePopup groupCondition pheno">
    <button type="button" class="add">New Group</button>
    <div></div>
</div>